<template>
  <div class="result-container">
    <div class="title-wrap">
      <!-- 标题 -->
      <h2 class="title">{{$route.query.q}}</h2>
      <span class="sub-title">找到{{songCount}}个结果</span>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲" name="songs">
        <table class="el-table">
          <thead>
            <th></th>
            <th>专辑图片</th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            
          </thead>
          <tbody>
            <tr v-for="(item,index) in songList" :key="index" class="el-table__row"  @dblclick="playMusic(item.id)">
              <td>{{index+1}}</td>
              <div class="img">
                <img :src="item.al.picUrl" >
                
              </div>
              <td>{{item.name}}</td>
              
              <td>{{item.ar[0].name}}</td>
              <td>{{item.al.name}}</td>
              
             
            </tr>
       

          </tbody>
        </table>
      </el-tab-pane>
      
    </el-tabs>

    <!-- 分页器 -->
      <el-pagination
        @current-change="CurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="10"
        :limit="limit"
      >
      </el-pagination>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'result',
  data() {
    return {
      activeIndex: 'songs',
      total: 0,
      page:1,
      limit:10,
      //歌曲查询结果
      songList:[],
      playList:[],
      mvList:[],
      //搜索结果总数
      songCount:0,
      type:1,
      
    }
  },
  watch:{
    search(){
        axios({
          url:'http://localhost:3000/cloudsearch?keywords',
          method:'get',
          params:{
            keywords:this.$route.query.q,
            limit:10,
            offset:(this.page-1)*this.limit,
            type:1
          }
        }).then(res => {
          console.log(res);
          //判断搜索内容是否报错  例如搜索了不该搜索的内部
          this.songList=res.data.result.songs;  
          console.log(this.songList);
          this.songCount=res.data.result.songCount
          this.total=res.data.result.songCount
         
            
        },err=>{
          console.log(err)
        })
      },
    //播放
    playMusic(id){
       axios({
          url: 'http://localhost:3000/song/url',
          method: 'get',
          params: {
            id // id:id
          }
        }).then(res => {
          // console.log(res)
          let url = res.data.data[0].url
          // console.log(this.$parent.musicUrl)
          // 设置给父组件的 播放地址
          this.$parent.musicUrl = url
        })
    },
  },
  created(){
    //搜索接口
   this.search();
  },
  methods:{
    //搜索
       search(){
        axios({
          url:'http://localhost:3000/cloudsearch?keywords',
          method:'get',
          params:{
            keywords:this.$route.query.q,
            limit:10,
            offset:(this.page-1)*this.limit,
            type:1
          }
        }).then(res => {
          console.log(res);
          //判断搜索内容是否报错  例如搜索了不该搜索的内部
          this.songList=res.data.result.songs;  
          console.log(this.songList);
          this.songCount=res.data.result.songCount
          this.total=res.data.result.songCount
         
            
        },err=>{
          console.log(err)
        })
      },
    //播放
    playMusic(id){
       axios({
          url: 'http://localhost:3000/song/url',
          method: 'get',
          params: {
            id // id:id
          }
        }).then(res => {
          // console.log(res)
          let url = res.data.data[0].url
          // console.log(this.$parent.musicUrl)
          // 设置给父组件的 播放地址
          this.$parent.musicUrl = url
        })
    },

    CurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page=val;
         axios({
          url:'http://localhost:3000/search',
          method:'get',
          params:{
            keywords:this.$route.query.q,
            limit:this.limit,
            offset:(this.page-1)*this.limit,
            type:this.type
          }
        }).then(res => {
          console.log(res);
        
              this.songList=res.data.result.songs;
                this.songCount=res.data.result.songCount
                this.total=res.data.result.songCount
                
         
         
        })
    }

  }
}
</script>

<style >

</style>
